<template>
  <div class="user-center-container">
    <el-card class="user-profile-card">
      <template #header>
        <div class="card-header">
          <h2>个人信息</h2>
        </div>
      </template>

      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>

      <div v-else class="user-info">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="学号/工号">{{
            userInfo.studentNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="角色">
            <el-tag>{{ roleMap[userInfo.role] || userInfo.role }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="注册时间">{{
            formatDate(userInfo.createdAt)
          }}</el-descriptions-item>
        </el-descriptions>

        <div class="action-buttons">
          <el-button type="primary" @click="handleEdit">编辑资料</el-button>
          <el-button type="warning" @click="handleChangePassword">修改密码</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { get } from '@/utils/request'

interface UserInfo {
  id: number
  username: string
  email: string
  phone: string
  role: string
  studentNumber: string
  createdAt: string
}

// 角色映射
const roleMap: Record<string, string> = {
  STUDENT: '学生',
  TEACHER: '教师',
  ADMIN: '管理员',
}

// 用户信息
const userInfo = reactive<UserInfo>({
  id: 0,
  username: '',
  email: '',
  phone: '',
  role: '',
  studentNumber: '',
  createdAt: '',
})

// 加载状态
const loading = ref(true)

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
    .replace(/\//g, '-')
}

// 获取用户信息
const fetchUserInfo = async () => {
  loading.value = true
  try {
    const res = await get<UserInfo>('/user/current')
    Object.assign(userInfo, res.data)
  } catch (error) {
    console.error('获取用户信息失败', error)
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

// 打开编辑对话框
const handleEdit = () => {
  ElMessage.info('编辑功能待实现')
}

// 打开修改密码对话框
const handleChangePassword = () => {
  ElMessage.info('修改密码功能待实现')
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.user-center-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.user-profile-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loading-container {
  padding: 20px 0;
}

.user-info {
  padding: 10px 0;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>
